<template>
    <view>
        <view v-if="!isLoad" :class="'margin-top load loading text-l text-darkgreen color-' + skin"></view>

        <view v-if="isLoad" :class="'main main-my-base  main-' + skin">
            <form style="width: 100%">
                <view class="form-box shadow">
                    <!-- base begin -->
                    <view class="form-group">
                        <view class="title">*姓名</view>
                        <input
                            placeholder="填写您的姓名"
                            placeholder-class="phc"
                            :value="userInfo.name"
                            maxlength="20"
                            @input="inputData"
                            data-item="name"
                            :focus="formNameFocus"/>
                    </view>

                    <view class="form-group">
                        <view class="title">*性别</view>
                        <radio-group @change="inputData" data-item="sex">
                            <label>
                                <radio value="1" class="green" :checked="userInfo.sex==1"/>
                                <text class="margin-left-xs">男</text>
                            </label>
                            <label>
                                <radio value="2" class="green" :checked="userInfo.sex == 2"/>
                                <text class="margin-left-xs">女</text>
                            </label>
                        </radio-group>
                    </view>

                    <view class="form-group">
                        <view class="title">*学院</view>
                        <picker class="form-input" mode="selector" :range="collegeList" :value="index"
                                @change="collegeChange">
                            {{ userInfo.college }}
                        </picker>
                    </view>


                    <view class="form-group">
                        <view class="title">*您的专业</view>
                        <picker class="form-input" mode="selector" :range="majorList" :value="index"
                                @change="majorChange">
                            {{ userInfo.major }}
                        </picker>
                    </view>

                    <view class="form-group">
                        <view class="title">*您的联系电话</view>
                        <input placeholder="请填写您的联系电话" placeholder-class="phc" v-model="userInfo.phone" maxlength="50"
                               @input="inputData" data-item="phone"/>
                    </view>

                    <view class="form-group" v-show="false">
                        <view class="title">*身份证号码</view>
                        <input placeholder="身份证号"  placeholder-class="phc" :value="userInfo.identity_card" maxlength="32"
                               @input="inputData" data-item="identity_card"/>
                    </view>
                    <view class="form-group" v-show="false">
                        <view class="title">*学号</view>
                        <input placeholder="填写您的学号" placeholder-class="phc" :value="userInfo.sid" maxlength="20"
                               @input="inputData" data-item="sid"/>
                    </view>
                    <view class="form-group">
                        <view class="title">*QQ</view>
                        <input placeholder="用于发送邮件" placeholder-class="phc" :value="userInfo.qq" maxlength="20"
                               @input="inputData" data-item="qq"/>
                    </view>

                </view>
                <!-- base end -->
                <view class="padding-bottom flex flex-direction">
                    <button formType="submit" @tap="submit" :class="'btn bg-darkgreen margin-top-s text-bold large bg-' + skin">提交
                    </button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            isLoad: true,
            index: 0,
            ApiUrl: app.globalData.ApiUrl,

            userInfo: {
                department: '',
                college: '',
                major: '',
                name: '',
                sex: 0,
                phone: '',
                departList: '',
                sid: '',
                qq: ''
            },
            collegeList:[],
            majorList:[],
            skin: 'skin1',
            formNameFocus: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function () {
        uni.showLoading({
            title: '加载中...'
        });
        this.SafeCode = uni.getStorageSync('SafeCode');
        const that = this;
        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/UserInfo',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            data: {
                //这里写你要请求的参数
                SafeCode: this.SafeCode
            },
            success: function (res) {
                that.setData({
                    userInfo: res.data
                });
                uni.hideLoading();
            }
        });
        that.getCollegeList();
        that.getMajorList();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showLoading({
            title: '加载中...'
        });
        this.SafeCode = uni.getStorageSync('SafeCode');
        const that = this;
        uni.request({
            url: app.globalData.ApiUrl + 'api/Android/UserInfo',
            //这里填写你的接口路径
            header: {
                'Content-Type': 'application/json'
            },
            data: {
                //这里写你要请求的参数
                SafeCode: that.SafeCode
            },
            success: function (res) {
                that.setData({
                    userInfo: res.data.data
                });
                uni.hideLoading();

                uni.stopPullDownRefresh();
            }
        });
    },
    methods: {

        getCollegeList() {
            const that = this;
            uni.request({
                url: app.globalData.ApiUrl + 'api/Android/getCollegeList',
                //这里填写你的接口路径
                header: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                data: {
                    SafeCode: uni.getStorageSync('SafeCode')
                },
                success: function (res) {

                    that.setData({
                        collegeDetail: res.data.data
                    });

                    let college = [];
                    for (let i = 0; i < res.data.data.length; i++) {
                        college.push(res.data.data[i].college_name);
                    }

                    that.setData({
                        collegeList: college
                    });
                }
            });
        },
        getMajorList(college) {
            const that = this;

            let data = {
                SafeCode: uni.getStorageSync('SafeCode'),
            };
            if (college) {
                data = {
                    SafeCode: uni.getStorageSync('SafeCode'),
                    college: college
                }
            }

            console.log(data);

            uni.request({
                url: app.globalData.ApiUrl + 'api/Android/GetMajorList',
                //这里填写你的接口路径
                header: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                data: data,
                success: function (res) {
                    console.log(res);
                    that.setData({
                        majorList: res.data.data
                    });
                }
            });
        },

        submit: function (e) {
            let that = this;
            uni.request({
                data: {
                    userInfo: that.userInfo,
                    SafeCode: uni.getStorageSync('SafeCode')
                },
                header: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                url: this.ApiUrl + 'api/Android/editDetail',
                success: function (res) {
                    res = res.data;

                    if (res.result === 'success') {
                        uni.showToast({
                            title: '修改成功！',
                            // 标题
                            icon: 'success',
                            // 图标类型，默认success
                            duration: 1500 // 提示窗停留时间，默认1500ms
                        });
                        setTimeout(function () {
                            uni.navigateBack({
                                delta: 1,
                                success: function () {
                                    console.log('成功！');
                                }
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'error',
                            duration: 1500
                        });
                    }
                }
            });
        },

        inputData: function (e) {
            const that = this;
            let val = e.detail.value;
            let item = e.target.dataset.item;
            let key = 'userInfo.' + item;
            that.setData({
                [key]: val
            });
            console.log(this.userInfo);
        },

        departChange: function (e) {
            let that = this;
            that.setData({
                'userInfo.department': this.userInfo.departList[e.detail.value]
            });
        },

        collegeChange: function (e) {

            let that = this;
            that.setData({
                'userInfo.college': that.collegeList[e.detail.value]
            });
            let college_id = that.collegeDetail[e.detail.value].college_id;

            that.getMajorList(college_id);


        },
        majorChange: function (e) {
            let that = this;
            that.setData({
                'userInfo.major': that.majorList[e.detail.value]
            });
        }
    }
};
</script>
<style>
</style>
